<template>
  <a-modal :title="title" style="top: 100px;" :visible="true" width="1300px" @cancel="handleCancel">
    <div class="tips">
    </div>
    <a-table class="product-table" :rowKey="row => row.id" :dataSource="list" bordered :pagination="false" size="small">
       <a-table-column title="用户" width="20px">
        <template slot-scope="row">
          <div class="user">
            <img :src="row.user.headimg" alt="用户头像">
            <span>{{ row.user.name }}</span>
            <a-tag color="red" style="margin-left:10px;" v-if="row.user.status === 2">已拉黑</a-tag>
            <a-tag color="red" style="margin-left:10px;" v-if="row.user.is_rb === 1">马甲</a-tag>
            <a-tag color="red" style="margin-left:10px;" v-if="row.user.is_rb2 === 1">主播</a-tag>
            <a-tag color="red" style="margin-left:10px;" v-if="row.user.is_liu === 1">老六</a-tag>
          </div>
        </template>
      </a-table-column>

      <a-table-column title="手机号" width="30px">
        <template slot-scope="row">
          <div>
            <span>{{row.user.phone}}</span>
          </div>
        </template>
      </a-table-column>

      <a-table-column title="榜单显示" width="30px">
        <template slot-scope="row">
          <div>
            <span v-if="row.is_default == 1">是</span>
            <span v-else>否</span>
          </div>
        </template>
      </a-table-column>

      <a-table-column title="备注" width="30px">
        <template slot-scope="row">
          <div>
            <span>{{row.user.remark}}</span>
          </div>
        </template>
      </a-table-column>
      
      <a-table-column title="操作" width="120px">
        <template slot-scope="row">
          <a href="javascript:;" @click="handleEdit(row)" v-if="is_super">编辑</a>
          <a-divider type="vertical" />
           <a href="javascript:;" @click="handleDelete(row)">删除</a>
        </template>
      </a-table-column>
    </a-table>
    <template slot="footer">
      <div class="btn-c">
        <a-button type="primary" class="add" @click="handleCreate">
          新增一个
        </a-button>
        <div style="flex-grow: 1;"></div>
        <a-button key="back" @click="handleCancel">关闭</a-button>
      </div>
    </template>
    
    </a-modal>
  </a-modal>
</template>
<script>
  import iSwitch from '@/components/ISwitch/ISwitch'
  export default {
    components: {
      iSwitch,
    },
    props: {
      info: {
        type: Object,
        default () {
          return {}
        }
      },
      currentSkuLevel: {
        type: Number,
        default () {
          return 1
        }
      }
    },
    data() {
      return {
        isEditLog: false,
        is_super: false,
        participant: [],
        current: {},
        isEditLordSkuList: false,
        list: [],
        listWeight: '',
        frame: [
          {
            title: '指定用户',
            key: 'user_id',
            type: 'user_id',
            newline: true,
          },
          {
            title: '榜单显示',
            key: 'is_default',
            type: 'radio',
            default: 0,
            required: true,
            span: 24,
            options: [{
                title: '否',
                value: 0
              },
              {
                title: '是',
                value: 1
              }
            ],
            tips: '设置榜单显示后,会取消其他已设置的'
          },
        ],
      }
    },
    computed: {
      title() {
        return '指定用户勋章'
      }
    },
    watch: {
      uuid() {
        this.initList()
      },
    },
    created() {
      if(Vue.ls.get('is_super')){
        this.is_super = true;
      }else{
        this.is_super = false;
      }
      this.initList()
    },
    methods: {
      initList() {
        this.$http.get(`/user-medal-list`, {
          params: {
            medal_id: this.info.id
          }
        }).then(res => {
          this.list = res.data.list
        })
      },
      handleCreate() {
        this.$iForm.show({
          title: '新增指定用户获得勋章',
          frame: this.frame,
          success: (data) => {
            this.$http.post(`/user-medal-list`, {
              ...data,
              medal_id: this.info.id,
            }).then(res => {
              this.initList()
              this.$iForm.hide()
            })
          },
        })
      },
      handleEdit(row) {
        this.$iForm.show({
          title: '编辑指定用户获得勋章',
          frame: this.frame,
          form: row,
          success: (data) => {
            this.$http.put(`/user-medal-list/${row.uuid}`, {
              type: 'update',
              attributes: {
                ...data
              }
            }).then(res => {
              this.initList()
              this.$iForm.hide()
            })
          },
        })
      },
      handleCancel() {
        this.$emit('refresh')
        this.$emit('close')
      },
      handleSave() {
        this.$emit('refresh')
        this.$emit('close')
      },
      handleDelete(row) {
        this.$confirm({
          title: '提示',
          content: `确认删除吗？`,
          onOk: () => {

            this.$http.delete(`/user-medal-list/${row.uuid}`).then(res => {
              this.$message.success('删除成功')
              this.initList()
            })

          }
        })


      }
    }
  }
</script>
<style lang="less" scoped>
  .thumb {
    width: 60px;
    // height: 60px;
    border-radius: 6px;
  }

  .btn-c {
    display: flex;
    // margin-top: 30px;
    padding: 0rpx 30rpx;

    .add {}

    .save {
      margin-right: 20px;
    }

    .cancel {}
  }

  .tips {
    color: gray;
    font-size: 80%;
    margin-bottom: 10px;
  }

  a-input {
    display: inline;
  }

  .user {
    display: flex;
    // flex-wrap: wrap;
    align-items: center;

    img {
      width: 26px;
      height: 26px;
      margin-right: 6px;
      border-radius: 50%;
      overflow: hidden;
    }

    .gender-man,
    .gender-woman {
      margin-left: 5px;
      font-size: 12px;
    }

    .gender-man {
      color: #409EFF;
    }

    .gender-woman {
      color: #F56C6C;
    }
  }
</style>
